<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
	<title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./common.css">
	<link rel="shortcut icon" href="favicon.ico">
    <style type="text/css">
		
		#login-page:after {
				content: '';
				background: url(resources/images/backgrounds.jpg);
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-filter: blur(3px);
				-moz-filter: blur(3px);
				-o-filter: blur(3px);
				-ms-filter: blur(3px);
				filter: blur(3px);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
		}
		
		.logo-title {
			text-align: center;
			letter-spacing: 2px;
			padding: 14px 0;
		}
		
		.logo-title h1{
			color: #007DDB;
			font-size: 32px;
			font-weight: 400;
		}
		
		#login-form {
			margin-top: 180px;
			background-color: #fff;
			border: 1px solid #fff;
			border-radius: 3px;
			padding: 14px 20px;
			box-shadow: 0 0 8px #eeeeee;
		}
		
		#login-form .layui-form-item {
			position: relative;
		}
		
		#login-form .layui-form-item label {
			position: absolute;
			left: 1px;
			top: 1px;
			width: 38px;
			line-height: 36px;
			text-align: center;
			color: #d2d2d2;
		}
		
		#login-form .layui-form-item input {
			padding-left: 36px;
		}
		
		#Captcha {
			width: 60%;
			display: inline-block;
		}
		
		.captcha-img {
			display: inline-block;
			width: 34%;
			float: right;
		}
		
		.captcha-img img {
			height: 34px;
			border: 1px solid #e6e6e6;
			height: 36px;
			width: 100%;
		}
		
    </style>
</head>
<body id="login-page">
    <div class="layui-container">
		<div class="layui-row layui-row-space10">
			<div class="layui-col-xs2 layui-col-md4">
				.
			</div>
			<div class="layui-col-xs8 layui-col-md4">
				<div class="layui-form" id="login-form">
					<form class="layui-form" action="">
						<div class="layui-form-item logo-title">
							<h1>用户登录</h1>
						</div>
						<div class="layui-form-item">
							<label class="layui-icon layui-icon-username" for="UserName"></label>
							<input type="text" name="UserName" id="UserName" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin">
						</div>
						<div class="layui-form-item">
							<label class="layui-icon layui-icon-password" for="Password"></label>
							<input type="password" name="Password" id="Password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="root">
						</div>
						<div class="layui-form-item">
						    <label class="layui-icon layui-icon-vercode" for="Captcha"></label>
							<input type="text" name="Captcha" id="Captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification" value="1234">
							<div class="captcha-img">
								<img id="captchaPic" src="">
							</div>
						</div>
						<div class="layui-form-item">
							<input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
						</div>
						<div class="layui-form-item">
							<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-login">登 入</button>
						</div>
					</form>
				</div>
			</div>
			<div class="layui-col-xs2 layui-col-md4">
				.
			</div>
		</div>
    </div>
    <script src="./plugins/layui/layui.js"></script>
    <script src="common.js"></script>
    <script>
    	
        var uuid = "";

        function uuidfun() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";

            var uuid = s.join("");
            return uuid;
        }

        function uuidstr() {
            uuid = uuidfun();
            return uuid;
        }

        layui.use(['jquery', 'form', 'layer', 'ajaxmod', 'verifymod'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                ajaxmod = layui.ajaxmod,
				verifymod = layui.verifymod;

            if (localStorage.getItem('rememberme')) {
                var setval = JSON.parse(localStorage.getItem('rememberme'));
                $("input[name='UserName']").val(setval.username)
                $("input[name='Password']").val(setval.password)
            }

            // 初始验证码 （盗用官方的哈哈）
            $("#captchaPic").attr('src', "https://www.oschina.net/action/user/captcha?uuid=" + uuidstr());

            // 验证码
            $("#captchaPic").click(function () {
                $("#captchaPic").attr('src', "https://www.oschina.net/action/user/captcha?uuid=" + uuidstr());
            });
			
			// 字段校验
			form.verify(verifymod);

            //监听提交
            form.on('submit(form-login)', function (data) {
                data.field.CaptchaKey = uuid;
                ajaxmod.layuiGet("/datas/login.json", data.field, function (res) {
                    if (res.success) {
                        cookie.set("usertoken", res.data.token)
                        cookie.set("username", res.data.userName)
                        cookie.set("name", res.data.name)

                        var reobj = {
                            username: data.field.UserName,
                            password: data.field.Password
                        }

                        if (data.field.rememberMe) {
                            localStorage.setItem("rememberme", JSON.stringify(reobj));
                        } else {
                            localStorage.removeItem("rememberme");
                        }

                        layer.msg('登录成功', {
                            icon: 1
                        });
                        
                        window.location.href = "index.html"
                        
                    } else {
                        layer.msg(res.message, {
                            icon: 2
                        });
                        $("#captchaPic").attr('src', baseUrl + "/api/sys/security/GetCaptcha?uuid=" + uuidstr());
                    }
                },1)
                return false;
            });
        });
    </script>
</body>

</html>
